<template>
  <div class="page-container-padding" style="display:flex;">
    <div style="width:900px;margin-right:10px;">
      <el-form ref="articleForm" label-width="80px" :model="articleObj" :rules="rules">
        <el-form-item prop="article_date" label="发表日期"><el-date-picker size="mini" v-model="articleObj.article_date" :clearable="false"></el-date-picker></el-form-item>
        <el-form-item prop="title" label="标题"><el-input size="mini" v-model="articleObj.title" placeholder="文章标题名称"></el-input></el-form-item>
        <el-form-item prop="article_type" label="文章类型">
          <el-select size="mini" v-model="articleObj.article_type" @change="articleTypeChange">
            <el-option value="T01" label="专题文章"></el-option>
            <el-option value="T02" label="公众号文章"></el-option>
            <el-option value="T03" label="外发媒体文章"></el-option>
            <el-option value="T11" label="其他"></el-option>
          </el-select>
          <span style="margin-left:2px;" v-show="articleObj.article_type==='T03'">
            <el-select v-model="currentMediaName" size="mini" @change="mediaNameChange" placeholder="外发媒体文章时选择媒体">
              <el-option value="期货日报" label="期货日报"></el-option>
              <el-option value="文华财经" label="文华财经"></el-option>
              <el-option value="新浪财经" label="新浪财经"></el-option>
              <el-option value="和讯网" label="和讯网"></el-option>
              <el-option value="其他" label="其他"></el-option>
            </el-select>
          </span>
        </el-form-item>
        <el-form-item label="稿件类型">
          <el-select v-model="articleObj.rough_type" size="mini">
            <el-option value="约稿" label="约稿"></el-option>
            <el-option value="投稿" label="投稿"></el-option>
            <el-option value="其他" label="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发表媒体"><el-input size="mini" v-model="articleObj.media_name" placeholder="瑞达期货研究院,期货日报,文华财经,新浪财经,和讯网等"></el-input></el-form-item>
        <el-form-item prop="words" label="字数"><el-input size="mini" v-model="articleObj.words" placeholder="文章的字数"></el-input></el-form-item>
        <el-form-item label="收入补贴"><el-input size="mini" v-model="articleObj.allowance"></el-input></el-form-item>
        <el-form-item label="合作者"><el-input size="mini" v-model="articleObj.partner" placeholder="一起完成工作的合作者名称"></el-input></el-form-item>
        <el-form-item label="是否外发">
          <el-radio-group v-model="articleObj.is_publish">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注"><el-input size="mini" v-model="articleObj.note" placeholder="备注说明"></el-input></el-form-item>
        <el-form-item prop="annex_file" label="附件">
          <el-upload
            action="''"
            :multiple="false"
            :before-upload="() => false"
            :on-change="annexFileChange"
            accept="*.doc,*.docx"
          >
            <div class="el-upload__text">
              <em style="color:#0066FF;">点击选择</em> (请使用.docx文档)
            </div>
          </el-upload>
          <span v-if="annexFilename">{{ annexFilename }} <i class="el-icon-delete-solid" style="color:#FF430D;margin-left:20px;cursor:pointer;" @click="annexFileRemove"></i></span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="createArticle" :loading="createLoading">确定提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 撰写说明 -->
    <div style="padding: 3px 5px;line-height:22px;max-width:450px;">
      <span class="explain-title">一、工作说明</span>
      <br>1、研究文章主要包含专题研究文章、公众号文章、外发媒体文章。其中专题指就某一个领域或热点进行的专门研究，文章主要是对热点
          或者行情进行分析展望。意在提高研究员的分析能力以及捕捉热点的敏锐度，同时支持公司业务发展，提高分析师知名度。
      <br><span class="explain-title">二、工作要求</span>
      <br>1、每个品种每 6 个月至少 1 篇公众号文章，每个品种每 6 个月至少 1 篇专题，每个品种每 6 个月至少 1 篇外发媒体平台文章（没证的以小组名义或者小组同事名义发）。相似文章只算一次记录
      <br>2、所有外发文章都要注意敏感词汇以及合规性，标题选取要能够有吸引性，但不能夸张低俗。
      <br>3、热点类文章，要求撰写要注意焦点的及时性和时效性，分析要全面有深度。
      <br>4、行情分析文章，注意标题的吸引性，内容要求逻辑性要强，注意数据的准确性和来源备注。
      <br>5、专题研究文章，注意研究的深度、逻辑、数据支撑。
      <br>6、所有文章要求原创。
      <br>7、文章以 WORD 文件形式作为附件要上传至系统。
      <br><span class="explain-title">三、考核评价</span>
      <br>1、文章考核的内容主要包括数量、质量。
      <br>2、根据文章的标题、逻辑、数据、论证、观点价值、篇幅分为五个等级。6 项要求都达到的 A、5 项的 B、4 项的 C、3 项的 D、2 项的E，小组长先审核，没问题文章部门审核人进行等级评定，
          文章审核期发现问题的及时退回更正后，以全新上传一篇文章的方式再上传审核评级。
      <br>3、数量达到要求的先进行排名。以数量为基础综合质量进行排名。
    </div>
  </div>
</template>

<script>
import { datetimeToStr } from '@/utils/datetimeUtils'
import { addWrittenArticle } from '@/api/departmentWork/articleWriting'
export default{
  data(){
    return {
      articleObj: {
        article_date: new Date(),
        title: '',
        article_type: null,
        rough_type: '投稿',
        media_name: '',
        words: null,
        checker: '',
        allowance: 0,
        is_publish: 1,
        partner: '',
        note: '',
        score: 1,
        annex_file: null
      },
      rules: {
        article_date: [{ required: true, message: '日期必填', trigger: 'blur' }],
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        article_type: [{ required: true, message: '请选择文章类型', trigger: 'change' }],
        words: [{ required: true, message: '请填写文章字数', trigger: 'blur' }],
        annex_file: [{ required: true, message: '请上传附件', trigger: 'change' }],
      },
      annexFilename: '',
      createLoading: false,

      currentMediaName: ''
    }
  },
  mounted() {

  },
  methods: {
    annexFileChange(file, fileList){
      this.annexFilename = file.name
      this.articleObj.annex_file = file.raw
    },

    annexFileRemove(){
      this.articleObj.annex_file = null
      this.annexFilename = ''
    },

    // 文章类型变化
    articleTypeChange(t){
      this.currentMediaName = null
      // this.articleObj.media_name = ''
      this.rules.annex_file = [{ required: true, message: '请上传附件', trigger: 'change' }]
      if (t === 'T01'){
        // 专题文章
        this.articleObj.media_name = ''
        this.rules.annex_file = []
      }else if(t==='T02'){
        // 公众号文章
        this.articleObj.media_name = '瑞达期货研究院'
      }else if (t === 'T03'){
        // 外发媒体
        this.articleObj.media_name = '期货日报'
        this.currentMediaName = '期货日报'
      }else{
        this.articleObj.media_name = ''
      }
    },

    mediaNameChange(name){
      this.articleObj.media_name = name
    },

    // 上传文章记录
    createArticle(){
      let validate_passed = true
      this.$refs['articleForm'].validate(valid => {
        validate_passed = valid
      })
      if (!validate_passed){
        this.$baseMessage('请完善信息！', 'error')
        return
      }

      let formData = new FormData()
      const bodyData = {
        create_date: datetimeToStr(this.articleObj.article_date, true, '-'),
        title: this.articleObj.title,
        article_type: this.articleObj.article_type,
        rough_type: this.articleObj.rough_type,
        media_name: this.articleObj.media_name,
        words: this.articleObj.words,
        allowance: this.articleObj.allowance,
        partner: this.articleObj.partner,
        is_publish: this.articleObj.is_publish,
        note: this.articleObj.note
      }
      formData.append('body_data', JSON.stringify(bodyData))
      if (this.articleObj.annex_file !== null){
        formData.append('annex_file', this.articleObj.annex_file)
      }
      if (!bodyData.title || !bodyData.article_type){
        this.$baseMessage('文章的标题和类型为必填项', 'error')
        return
      }
      // 上传
      addWrittenArticle(formData).then(res => {
        this.$baseMessage(res.msg, res.code===201?'success':'error')
        if (res.code === 201){
          this.articleObj.title = ''
          this.articleObj.article_type = null
          this.articleObj.annex_file = null
          this.annexFilename = ''
        }
        this.createLoading = false
      }).catch(err=> {
        this.createLoading = false
      })
    }
  }
}
</script>

<style scoped>
.explain-title{
  font-weight:700;
  color: #006eff;
}
</style>
